<template>
  <div>
    <div id="box" class="container">
      <!-- 头部 -->
      <div class="top">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div class="main" v-else>
          <!-- 第一行 -->
          <div class="first-row">
            <dv-decoration-10 style="width: 33.3%; height: 5px" />
            <dv-decoration-8 style="width: 150px; height: 30px" />
            <div class="title">
              <span>数据可视化平台</span>
            </div>
            <dv-decoration-8
              :reverse="true"
              style="width: 150px; height: 30px"
            />
            <dv-decoration-10 style="width: 33.3%; height: 5px;transform: rotate(180deg);" />
          </div>

          <!-- 第二行 -->
          <div class="second-row">
            <div id="data1" :class="{ current: isActive == 1 }" @click="btn(1)">
              <span>数据分析1</span>
            </div>
            <div id="data2" :class="{ current: isActive == 2 }" @click="btn(2)">
              <span>数据分析2</span>
            </div>
            <dv-decoration-3 style="flex: 1; height: 30px" />
            <div id="data3" :class="{ current: isActive == 3 }" @click="btn(3)">
              <span>数据分析3</span>
            </div>
            <div id="data4">
              <span>{{ dateYear }}{{ dateWeek }}{{ dateDay }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 左上 -->
      <div class="left-top" style="width: 370px; height: 400px">
        <dv-border-box-13>
          <echart1 />
        </dv-border-box-13>
      </div>

      <!-- 左下 -->
      <div class="left-bottom" style="width: 370px; height: 380px">
        <dv-border-box-13>
          <echart2 />
        </dv-border-box-13>
      </div>
      <!-- 右上 -->
      <div class="right-top" style="width: 420px; height: 400px">
        <dv-border-box-13>
          <echart3 />
        </dv-border-box-13>
      </div>

      <!-- 右下 -->
      <div class="right-bottom" style="width: 420px; height: 380px">
        <dv-border-box-12>
          <echart4></echart4>
        </dv-border-box-12>
      </div>
    </div>
  </div>
</template>

<script>
import echart3 from "@/views/right-top.vue";
import echart4 from "@/views/right-bottom.vue";
import echart1 from "@/views/left-top.vue";
import echart2 from "@/views/left-bottom.vue";
import dayjs from "dayjs";
// import { echartCanvas } from "@/utils/ehcart";
import ZThree from "@/utils/Init";
import * as THREE from "three";
let app, camera, scene, renderer, controls, clock, cityModel;
// import { createSprite } from "@/utils/canvas";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      isActive: 0,
      loading: false,
      timing: null,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      loading: false,

      // address: [
      //   {
      //     position: [0, 0, 0],
      //     name: "油管",
      //   },
      //   {
      //     position: [-240, 160, -30],
      //     name: "气罐",
      //   },
      //   {
      //     position: [130, 0, 70],
      //     name: "地点",
      //   },
      //   {
      //     position: [170, 0, 70],
      //     name: "地点2",
      //   },
      //   {
      //     position: [200, 0, 70],
      //     name: "地点3",
      //   },
      // ],
    };
  },
  methods: {
    async initZThree() {
      app = new ZThree("box");
      app.initThree();
      app.initHelper();
      app.initOrbitControls();
      app.initLight();
      app.loadGltf();
      window.app = app;
      camera = app.camera;
      scene = app.scene;
      renderer = app.renderer;
      controls = app.controls;
      clock = new THREE.Clock();
      // camera.position.set(30, 30, 30);
      camera.lookAt(0, 0, 0);
      // camera.position.set(18, 364, 397);
      camera.position.set(5000, 10000, 20000);
      //  camera.position.set(10, 400, 400);
      //
      // console.log('摄像机',camera.position.set);
      controls.target = new THREE.Vector3(2, 44, -320);

      renderer.render(scene, camera);
      /*      调用obj模型
        cityModel = await app.loaderObjModel(
          "model/factory/",
          "factory",
          "factory"
        );
        scene.add(cityModel);
  
          const loader = new GLTFLoader()
         loader.load('model/Soldier.glb',function(gltf){
          scene.add(gltf.scene)
         }) */

      // 调用天空盒
      app.loaderSky("Space_Nebula_DeepBlack/");
    

      // 调用echart
      // echartCanvas(scene);
    },
    // 渲染函数
    animate() {
      requestAnimationFrame(this.animate);
      controls.update();
      renderer.render(scene, camera);
    },
    // 刷新时间函数
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = dayjs(new Date()).format("HH:mm:ss");
        this.dateYear = dayjs(new Date()).format("YYYY-MM-DD");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    btn(index) {
      this.isActive = index;
    },
  },
  mounted() {
    this.initZThree();
    this.animate();
    this.timeFn();
  },
  created() {},
  components: {
    echart1,
    echart2,
    echart3,
    echart4,
  },
};
</script>

<style lang="less" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  // background-color: #000;
}
.sprite-canvas {
  position: absolute;
  width: 1024px;
  height: 1024px;
  font-size: 128px;
  top: 0;
  box-sizing: border-box;
  background-color: transparent;
  color: #fff;
  text-align: center;
  .sprite-layer {
    margin-top: 60%;
    background-color: blue;
    padding: 1% 2%;
  }
}
.left-top {
  position: absolute;
  left: 0;
  top: 10%;
  z-index: 99999999;
  overflow: hidden;
}
.left-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 99999999;
  overflow: hidden;
}
.right-top {
  position: absolute;
  right: 0;
  top: 10%;
  z-index: 99999999;
  opacity: 1;
}
.right-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 99999999;
  opacity: 0.8;
}
.top {
  // width: 100%;
  // height: 100%;
  // pointer-events:none;
  z-index: 9999;
  width: 100%;
  position: absolute;
  top: 5px;
  background: rgba(0, 0, 0, 0.4);
  .main {
    // 第一行
    .first-row {
      display: flex;
      // background: yellow;
      .title {
        flex: 1;
        color: #fff;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    // 第二行
    .second-row {
      display: flex;
      span {
        line-height: 30px;
        font-size: 14px;
      }
      #data1 {
        width: 25%;
        height: 30px;
        background: rgb(15, 19, 34);
        // transform: skewX(60deg);
        text-align: center;
        clip-path: polygon(0 0, 92% 0%, 100% 100%, 0% 100%);
        span {
          color: #fff;
          transform: skewX(-45deg);
          text-align: center;
        }
      }
      #data2 {
        width: 15%;
        height: 30px;
        background: rgb(15, 19, 34);
        // transform: skewX(60deg);
        text-align: center;
        clip-path: polygon(0 0, 77% 0, 94% 100%, 13% 99%);
        span {
          color: #fff;
          transform: skewX(-45deg);
          text-align: center;
        }
      }
      #data3 {
        width: 15%;
        height: 30px;
        background: rgb(15, 19, 34);
        // transform: skewX(60deg);
        text-align: center;
        clip-path: polygon(15% 0%, 100% 0%, 87% 100%, 0% 100%);
        span {
          color: #fff;
          transform: skewX(-45deg);
          text-align: center;
        }
      }
      #data4 {
        width: 25%;
        height: 30px;
        background: rgb(15, 19, 34);
        // transform: skewX(60deg);
        text-align: center;
        clip-path: polygon(8% 0%, 100% 0, 100% 100%, 0% 100%);
        span {
          color: #ccc;
          transform: skewX(-45deg);
          text-align: center;
        }
      }
    }
  }
}
.dv-decoration-8 {
  & polyline:nth-child(3) {
    display: none;
  }
}
</style>
